<!-- ERC-设备管理-设备台账页面 -->
<template>
  <div>
    <div v-show="isMain" class="equip-wrap-common">
      <!--左侧树形结构 -->
      <div class="equip-tree-wrap">
        <div class="equip-tree-content">
          <px-input v-model="filterText" style="margin-right: 6px" placeholder="请输入关键字搜索" />
          <px-tooltip content="全部收折" placement="top">
            <px-button v-show="isTreeOpen" link type="primary" icon="ChevronUpRectangle" @click="openOrCloseTree('close')" />
          </px-tooltip>
          <px-tooltip content="全部展开" placement="top">
            <px-button v-show="!isTreeOpen" link type="primary" icon="ChevronDownRectangle" @click="openOrCloseTree('open')" />
          </px-tooltip>
          <px-tooltip content="清除选中" placement="top">
            <px-button style="margin-left: 4px" link type="primary" icon="RefreshLeft" @click="resetCheck" />
          </px-tooltip>
        </div>
        <px-scrollbar class="equip-scroll">
          <px-tree
            ref="treeRef"
            :default-checked-keys="defaultCheckedKeys"
            :data="treeData"
            :props="{ children: 'children', label: 'name' }"
            default-expand-all
            node-key="id"
            :filter-node-method="filterNode"
            :expand-on-click-node="false"
            highlight-current
            :expanded-keys="expandedKeys"
            @node-click="nodeClick"
          >
            <template #default="{ node, data }">
              <div class="custom-tree-node">
                <px-tooltip :content="node.label" placement="top">
                  <span class="node-label">{{ node.label }}</span>
                </px-tooltip>
                <div class="node-buttons">
                  <span style="position: relative; display: inline-block">
                    <px-dropdown trigger="click">
                      <px-button
                        v-or="['ERC_EQUIP_LEDGER_ADDTREE', 'ERC_EQUIP_LEDGER_EDITTREE', 'ERC_EQUIP_LEDGER_DELETETREE']"
                        link
                        type="primary"
                        icon="More"
                        @click.stop="showDropdown(data)"
                      />
                      <template #dropdown>
                        <px-dropdown-menu>
                          <div v-has="'ERC_EQUIP_LEDGER_ADDTREE'">
                            <px-dropdown-item v-if="parentCode == 0 || parentCode == -1" @click="AddTree(data)">
                              <px-icon> <Plus /> </px-icon><span>新增</span></px-dropdown-item
                            >
                          </div>
                          <div v-has="'ERC_EQUIP_LEDGER_EDITTREE'">
                            <px-dropdown-item @click="EditTree(data)"
                              ><px-icon> <EditPen /> </px-icon><span>编辑</span></px-dropdown-item
                            >
                          </div>
                          <div v-has="'ERC_EQUIP_LEDGER_DELETETREE'">
                            <px-dropdown-item @click="DeleteTree(data)"
                              ><px-icon> <Delete /> </px-icon><span>删除</span></px-dropdown-item
                            >
                          </div>
                        </px-dropdown-menu>
                      </template>
                    </px-dropdown>
                  </span>
                </div>
              </div>
            </template>
          </px-tree>
        </px-scrollbar>
      </div>
      <!-- 右侧整体功能 -->
      <div class="equip-table-wrap">
        <!-- 搜索功能 -->
        <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
          <px-row :gutter="16">
            <px-col :span="5">
              <px-form-item label="地块">
                <px-select v-model="queryParams.facCode" placeholder="请选择地块" clearable>
                  <px-option v-for="item in facCodeList" :key="item.id" :label="item.name" :value="item.value" />
                </px-select>
              </px-form-item>
            </px-col>
            <px-col :span="5">
              <px-form-item label="设备名称">
                <px-input
                  v-model="queryParams.value"
                  placeholder="请输入名称/编码"
                  maxlength="50"
                  @blur="queryParams.value = $event.target.value.trim()"
                  @keyup.enter="queryTable"
                >
                  <template #suffix>
                    <px-icon style="cursor: pointer" @click="queryTable">
                      <search />
                    </px-icon>
                  </template>
                </px-input>
              </px-form-item>
            </px-col>
            <px-col :span="5">
              <px-form-item label="安装位置">
                <px-cascader
                  ref="treeSelectRef"
                  v-model="queryParams.positionCode"
                  :options="positionCodeList"
                  :props="{
                    children: 'children',
                    label: 'name',
                    value: 'code',
                    checkStrictly: true
                  }"
                  :show-all-levels="false"
                  clearable
                  @focus="positionCodeFocus"
                  @change="handleCascaderChange"
                />
              </px-form-item>
            </px-col>
            <px-col :span="5">
              <px-form-item label="设备状态">
                <px-select v-model="queryParams.eqpStatus" placeholder="请选择设备运行状态" clearable>
                  <px-option v-for="item in eqpStatusList" :key="item.id" :label="item.name" :value="item.value" />
                </px-select>
              </px-form-item>
            </px-col>
            <px-col :span="4">
              <px-button type="primary" @click="queryTable">查询</px-button>
              <px-button @click="resetTable">重置</px-button>
            </px-col>
          </px-row>
        </px-form>
        <!-- 按钮功能 -->
        <div class="equip-table-btn">
          <px-button v-has="'ERC_EQUIP_LEDGER_ADD'" style="margin-right: 8px" type="primary" :disabled="typeLevelFlag" @click="addTableType"
            >新增设备</px-button
          >
          <px-button v-has="'ERC_EQUIP_LEDGER_DOWNLOADTEMPLATE'" style="margin-right: 8px" type="primary" plain @click="templateDownload"
            >下载模板</px-button
          >
          <!-- <BatchUpload url="/ifp/erc/api/v1/eqp/importData" title="导入" permission="ERC_EQUIP_LEDGER_UPLOAD" @updateUploadPage="queryTable" /> -->
          <BatchUpload url="/ifp/erc/api/v1/eqp/importEqpData" title="导入" permission="ERC_EQUIP_LEDGER_UPLOAD" @updateUploadPage="queryTable" />
          <px-button v-has="'ERC_EQUIP_LEDGER_BATCHDOWNLOAD'" type="primary" style="margin-right: 8px" plain @click="batchDownload"
            >查询并导出</px-button
          >
          <px-button
            v-has="'ERC_EQUIP_LEDGER_EXPORT_EQPIMG'"
            :disabled="!typeLevelPlus && selectIds.length == 0"
            type="success"
            style="margin-right: 8px"
            plain
            @click="batchDownloadEqpImg"
          >
            查询并导出设备标签
          </px-button>
          <px-button v-has="'ERC_EQUIP_LEDGER_RECREATE'" type="warning" style="margin-right: 8px" plain @click="isEqpImgShow = true"
            >设备标签重新生成</px-button
          >
          <px-button v-has="'ERC_EQUIP_LEDGER_BATCHDELETE'" type="danger" plain @click="batchDelete">批量删除</px-button>
        </div>
        <!-- 表格功能 -->
        <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 311px)" border @selection-change="selectionChange">
          <px-table-column type="selection" min-width="40" align="center" fixed="left" />
          <px-table-column label="序号" min-width="60" align="center" fixed="left">
            <template #default="{ $index }">
              {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
            </template>
          </px-table-column>
          <px-table-column
            v-for="(item, index) in tableColumns"
            :key="index"
            :label="item.label"
            :min-width="item.minWidth"
            :align="item.align"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :fixed="item.fixed"
          >
            <template #default="scope">
              <span v-if="item.eqpStatusValue">
                <!-- 故障 -->
                <span
                  v-if="scope.row.eqpStatusValue === '故障'"
                  style="
                    display: inline-block;
                    height: 22px;
                    padding: 0 8px;
                    line-height: 22px;
                    color: #ef4444;
                    text-align: center;
                    background: #feecec;
                    border: 1px solid #fac7c7;
                    border-radius: 4px;
                  "
                >
                  {{ scope.row.eqpStatusValue }}
                </span>
                <!-- 异常 -->
                <span
                  v-else-if="scope.row.eqpStatusValue === '异常'"
                  style="
                    display: inline-block;
                    height: 22px;
                    padding: 0 8px;
                    line-height: 22px;
                    color: #f59e0b;
                    text-align: center;
                    background: #fef5e6;
                    border: 1px solid #fef5e6;
                    border-radius: 4px;
                  "
                >
                  {{ scope.row.eqpStatusValue }}
                </span>
                <!-- 火警 -->
                <span
                  v-else-if="scope.row.eqpStatusValue === '正常'"
                  style="
                    display: inline-block;
                    height: 22px;
                    padding: 0 8px;
                    line-height: 22px;
                    color: #10b981;
                    text-align: center;
                    background: #e8f8f3;
                    border: 1px solid #b7ead9;
                    border-radius: 4px;
                  "
                >
                  {{ scope.row.eqpStatusValue }}
                </span>
                <!-- 监管 -->
                <span
                  v-else-if="scope.row.eqpStatusValue === '监管'"
                  style="
                    display: inline-block;
                    height: 22px;
                    padding: 0 8px;
                    line-height: 22px;
                    color: #3b82f6;
                    text-align: center;
                    background: #ecf5ff;
                    border: 1px solid #c6e2ff;
                    border-radius: 4px;
                  "
                >
                  {{ scope.row.eqpStatusValue }}
                </span>
                <!-- 正常 -->
                <span v-else-if="scope.row.eqpStatusValue === '火警'" class="status">
                  <img :src="firePng" />
                  <span>{{ scope.row.eqpStatusValue }}</span>
                </span>
                <span v-else> {{ scope.row.eqpStatusValue || "-" }} </span>
              </span>
              <span v-else>{{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}</span>
            </template>
          </px-table-column>
          <px-table-column fixed="right" label="操作" min-width="120" align="center">
            <template #default="scope">
              <px-tooltip content="详情" placement="top">
                <px-button v-has="'ERC_EQUIP_LEDGER_VIEW'" link type="primary" icon="Tickets" @click="handleView(scope.row)" />
              </px-tooltip>
              <px-tooltip content="编辑" placement="top">
                <px-button v-has="'ERC_EQUIP_LEDGER_EDIT'" link type="primary" icon="EditPen" @click="handleEdit(scope.row)" />
              </px-tooltip>
              <px-tooltip content="删除" placement="top">
                <px-button v-has="'ERC_EQUIP_LEDGER_DELETE'" link type="danger" icon="Delete" @click="handleDelete(scope.row)" />
              </px-tooltip>
            </template>
          </px-table-column>
        </px-table>
        <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          class="equip-pagination"
          :total="total"
          @pagination="queryTable"
        />
      </div>
    </div>
    <!-- 左侧添加树类型页面 -->
    <AddTreeDetail
      :TreedialogVisible="TreedialogVisible"
      :dialogType="dialogType"
      :dialogRow="dialogRow"
      @queryTable="queryTable"
      @queryTree="queryTree"
      @closeDialog="TreedialogVisible = false"
    />
    <!-- 右侧设备类型新增/编辑页面 -->
    <AddTypeDetail
      :isMain="isMain"
      :treeNameType="treeNameType"
      :tableType="tableType"
      :isView="isView"
      :typeName="typeName"
      :typeCode="typeCode"
      :sparePartsId="sparePartsId"
      :treeTypeid="treeTypeid"
      @queryTable="queryTable"
      @backMainPage="backMainPage"
    />
    <!-- 详情查看页面 -->
    <ViewTypeDetail :isMain="isMain" :isView="isView" :sparePartsId="sparePartsId" :tableType="tableType" @backMainPage="backMainPage" />
    <!--设备二维码标签重新生成弹窗-->
    <CreateEqpImgDialog :visible="isEqpImgShow" @closeDialog="isEqpImgShow = false" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ERC_SPAREPARTS_LEDGER"
});
import { onMounted, reactive, toRefs, watch, getCurrentInstance, ref, nextTick } from "vue";
import BatchUpload from "@/components/Upload/BatchUpload.vue";
import { PxMessage, PxMessageBox } from "px-ui";
import { searchTreeLedger, deleteTreeLedger, positionLedger } from "@/api/erc/equip";
import { queryToolLedger, deleteToolLedger, getEqpImgs } from "@/api/erc/equip";
import { queryDictData } from "@/api/common"; //设备状态接口
import AddTreeDetail from "./components/AddTreeDetail.vue";
import AddTypeDetail from "./components/AddTypeDetail.vue";
import ViewTypeDetail from "./components/ViewTypeDetail.vue";
import firePng from "@/assets/images/erc/fire.png";
import axios from "axios";
import { getToken } from "@/utils/auth";
import CreateEqpImgDialog from "./components/CreateEqpImgDialog.vue";
const { proxy }: any = getCurrentInstance();
// const loading = ref(true);
const treeSelectRef = ref<any>(null);
const state = reactive<any>({
  isMain: true, // 主页面true 详情页面false
  isView: true, // 查看true 新增/编辑false
  parentCode: "",
  typeLevelFlag: true, //右侧新增按钮隐藏显示
  typeLevelPlus: null,
  filterText: "",
  treeRef: null,
  treeData: [],
  expandedKeys: [],
  defaultExpandedKeys: [],
  isTreeOpen: true,
  TreedialogVisible: false,
  dialogRow: {},
  facCodeList: [],
  positionCodeList: [],
  eqpStatusList: [],
  queryParams: {
    pageNum: 1,
    pageSize: 20,
    systemCode: "",
    facCode: "",
    value: "",
    positionCode: "",
    eqpStatus: "",
    typeCode: ""
  },
  formValue: {
    eqpId: "",
    eqpName: "",
    facCode: "",
    facName: "",
    typeCode: "",
    positionCode: ""
  },
  treeDataPlus: "",
  typeCode: "",
  typeName: "",
  tableColumns: [
    { prop: "eqpName", label: "设备名称", minWidth: "176", showOverflowTooltip: true, fixed: "left" },
    { prop: "eqpCode", label: "设备编号", minWidth: "176", showOverflowTooltip: true },
    { prop: "eqpId", label: "设备编码", minWidth: "176", showOverflowTooltip: true },
    { prop: "specification", label: "规格型号", minWidth: "180", showOverflowTooltip: true },
    { prop: "facName", label: "地块", minWidth: "120", showOverflowTooltip: true },
    { prop: "positionNameAll", label: "安装位置", minWidth: "200", showOverflowTooltip: true },
    { prop: "eqpStatusValue", label: "设备状态", minWidth: "120", showOverflowTooltip: true, eqpStatusValue: true },
    { prop: "brand", label: "品牌", minWidth: "150", showOverflowTooltip: true },
    { prop: "contactName", label: "联系人", minWidth: "150", showOverflowTooltip: true },
    { prop: "contactTel", label: "联系方式", minWidth: "150", showOverflowTooltip: true }
  ],
  tableData: [],
  total: 0,
  selectIds: [],
  bigFileLists: [],
  eqpIdLists: [],
  downloadParams: {
    ids: [],
    systemCode: "",
    facCode: "",
    value: "",
    positionCode: "",
    eqpStatus: ""
  },
  rowData: {},
  dialogType: "add",
  tableType: "add",
  sparePartsId: "",
  treeNameType: "",
  treeTypeid: "",
  defaultCheckedKeys: [],
  isEqpImgShow: false,
  typeCodeList: []
});
const {
  isMain,
  isView,
  typeCode,
  typeName,
  filterText,
  parentCode,
  typeLevelFlag,
  typeLevelPlus,
  treeRef,
  treeData,
  expandedKeys,
  defaultExpandedKeys,
  isTreeOpen,
  TreedialogVisible,
  dialogRow,
  facCodeList,
  positionCodeList,
  eqpStatusList,
  queryParams,
  tableColumns,
  tableData,
  total,
  selectIds,
  bigFileLists,
  eqpIdLists,
  dialogType,
  tableType,
  sparePartsId,
  treeNameType,
  treeTypeid,
  defaultCheckedKeys,
  isEqpImgShow,
  typeCodeList
} = toRefs(state);

// 监视过滤树的值
watch(filterText, val => {
  treeRef.value!.filter(val);
});
// 进入页面时触发
onMounted(() => {
  queryTree();
  querySelectList();
  queryTable();
});
/** 左侧-树形区 **/
// 进入页面加载左侧树
const queryTree = async () => {
  const data: any = await searchTreeLedger({
    name: ""
  });
  treeData.value = data;
};
// 过滤树数据
const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.name.includes(value);
};
///树形下拉
const showDropdown = data => {
  parentCode.value = data.parentCode;
};

// 左侧树添加清除选中按钮
const resetCheck = () => {
  filterText.value = "";
  const selectedNodes = document.querySelectorAll(".is-current");
  selectedNodes.forEach(element => {
    element.classList.remove("is-current");
  });
  queryParams.value = {
    pageNum: 1,
    pageSize: 20,
    facCode: queryParams.value.facCode,
    value: queryParams.value.value,
    positionCode: queryParams.value.positionCode,
    eqpStatus: queryParams.value.eqpStatus
  };
  queryTable();
};
// 点击左侧树节点，获取facCode，查询设备列表
const nodeClick = data => {
  typeLevelPlus.value = data.typeLevel;
  queryParams.value.typeCode = data.code;
  typeCode.value = data.parentCode;
  typeName.value = data.name;
  if (data.code === "0") {
    queryParams.value.eqpCodes = [];
  } else {
    const codes = [data.code];
    if (data.children && data.children.length > 0) {
      data.children.forEach(item => {
        codes.push(item.code);
      });
    }
    queryParams.value.eqpCodes = codes;
  }
  if ((data?.typeLevel === 2 && !data?.children) || data?.typeLevel === 3) {
    typeLevelFlag.value = false;
  } else {
    typeLevelFlag.value = true;
  }
  queryTable();
};
// 打开或者关闭树
const openOrCloseTree = type => {
  if (type == "close") {
    isTreeOpen.value = false;
    let nodes = treeRef.value.store._getAllNodes();
    nodes.forEach(item => {
      item.expanded = false;
    });
  } else if (type == "open") {
    isTreeOpen.value = true;
    let nodes = treeRef.value.store._getAllNodes();
    nodes.forEach(item => {
      item.expanded = true;
    });
  }
};

// 新增树形类型
const AddTree = (data: any) => {
  dialogType.value = "add";
  TreedialogVisible.value = true;
  dialogRow.value = data;
};
// 编辑树形类型-显示弹窗
const EditTree = (data: any) => {
  dialogType.value = "edit";
  dialogRow.value = data;
  TreedialogVisible.value = true;
};

// 删除树形类型
const DeleteTree = async (data: any) => {
  PxMessageBox.confirm(`确定要删除当前设备类型“${data.name}”吗？`, "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const params = {
        code: data.code
      };
      await deleteTreeLedger(params);
      PxMessage.success("删除成功");
      queryTable();
      queryTree();
    })
    .catch(() => {});
};

// 安装位置聚焦时--存放
const positionCodeFocus = async () => {
  positionCodeList.value = await positionLedger({ facCode: queryParams.value.facCode });
};
//安装位置一级二级不能选中,只能折叠,不会回显
const handleCascaderChange = pathValues => {
  if (!pathValues || pathValues.length === 0) return;
  // 判断选中层级（路径长度即为层级）
  const level = pathValues.length;
  if (level <= 2) {
    // 前两级节点：重置选中值，保持下拉框展开
    queryParams.value.positionCode = [];
    treeSelectRef.value?.togglePopperVisible(true); // 保持展开状态
  } else {
    // 第三级及以下：保留选中值（自动回显）
    queryParams.value.positionCode = pathValues.slice(-1)[0].toString();
  }
};
/** 右侧-表格区 **/
// 归属地块、存放位置,设备状态下拉框
const querySelectList = async () => {
  //地块
  facCodeList.value = await queryDictData({ typeCode: "ERC_FACTORY_AREA" });

  //设备状态
  eqpStatusList.value = [{ name: "全部", value: "", id: -1 }];
  const params = {
    typeCode: "ERC_EQP_STATUS"
  };
  const data = await queryDictData(params);
  eqpStatusList.value = eqpStatusList.value.concat(data);
};

// 查询备件台账列表
const queryTable = async () => {
  const data = await queryToolLedger({ ...queryParams.value });
  tableData.value = data?.data;
  total.value = data?.total;
  typeCode.value = queryParams.value.typeCode;
};
// 重置筛选条件和备件台账列表
const resetTable = async () => {
  queryParams.value.facCode = "";
  queryParams.value.value = "";
  queryParams.value.positionCode = "";
  queryParams.value.eqpStatus = "";
  queryTable();
};

// 按钮功能
// 从新增/编辑、详情返回主页面
const backMainPage = () => {
  isMain.value = true;
};
// 新增设备类型台账按钮
const addTableType = () => {
  tableType.value = "add";
  isMain.value = false;
  isView.value = false;
};
// 下载模版按钮
// const templateDownload = async () => {
//   proxy.download("get", "/erc/api/v1/eqp/templateDownLoad", {}, "设备管理设备台账信息模板.xlsx");
// };
const templateDownload = async () => {
  proxy.download("get", "/erc/api/v1/eqp/downLoadTemplate", {}, "设备管理设备台账信息模板.xlsx");
};
const submitHandler = () => {};
// 表格多选框选中-批量导出、批量删除使用
const selectionChange = (val: any) => {
  selectIds.value = [];
  eqpIdLists.value = [];
  bigFileLists.value = [];
  val.forEach((item: any) => {
    if (item.id) {
      selectIds.value.push(item.id);
      eqpIdLists.value.push(item.eqpId);
      bigFileLists.value.push(item.bigFile);
    }
  });
};
// 查询并导出
const batchDownload = async () => {
  await queryTable();
  const params = {
    value: queryParams.value.value,
    facCode: queryParams.value.facCode,
    positionCode: queryParams.value.positionCode,
    eqpStatus: queryParams.value.eqpStatus
  };
  proxy.download("post", "/erc/api/v1/eqp/exportData", params, "设备信息.xlsx");
};

// 批量下载设备图片
const batchDownloadEqpImg = async () => {
  const params = JSON.parse(JSON.stringify(queryParams.value));
  const { positionCodes } = queryParams.value;
  params.typeCode = typeCode.value;
  const eqpImgIdList: any = await getEqpImgs({ ...params, positionCodes: positionCodes ? [positionCodes[positionCodes?.length - 1]] : [] });
  if (eqpImgIdList.length !== 0) {
    axios({
      method: "post",
      url: "/ifp/sharing/api/v1/file/downloadFilesAsZip",
      data: {
        factoryId: queryParams.value.facCode,
        idList: bigFileLists.value && bigFileLists.value.length > 0 ? bigFileLists.value : eqpImgIdList
      },
      responseType: "blob",
      headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
        "X-Requested-With": "XMLHttpRequest",
        Authorization: "Bearer " + getToken().accessToken || "",
        facCode: localStorage.getItem("facCode") || ""
      }
    }).then(async res => {
      const blob = new Blob([res.data], { type: res.headers["content-Type"] });
      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = "设备标签.zip";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    });
  } else {
    PxMessage.warning("没有符合条件的设备二维码标签");
    return;
  }
};
// 批量删除按钮   deleteToolLedger
const batchDelete = async () => {
  if (eqpIdLists.value.length == 0) {
    PxMessage.warning("请选择设备后操作");
    return;
  }
  PxMessageBox.confirm(`要删除当前已选的 ${eqpIdLists.value.length} 个设备吗？删除后不可恢复，请谨慎操作`, "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const data = await deleteToolLedger({
        eqpIdList: eqpIdLists.value
      });
      PxMessage.success("删除成功");
      queryTable();
    })
    .catch(() => {});
};

// 查看备件详情
const handleView = (row: any) => {
  tableType.value = "view";
  sparePartsId.value = row;
  isMain.value = false;
  isView.value = true;
};

// 编辑单条备件台账
const handleEdit = (row: any) => {
  sparePartsId.value = row;
  tableType.value = "edit";
  isMain.value = false;
  isView.value = false;
};
// 删除单条备件台账
const handleDelete = async (row: any) => {
  PxMessageBox.confirm(`要删除当前设备“${row.eqpName}”吗？删除后不可恢复，请谨慎操作`, "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const eqpIdListsPuls = [];
      eqpIdListsPuls.push(row.eqpId);
      await deleteToolLedger({
        eqpIdList: eqpIdListsPuls
      });
      PxMessage.success("删除成功");
      queryTable();
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
@import url("@/views/erc/scss/table-flex-list.scss");

.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 8px;
  font-size: 14px;
}

.node-label {
  max-width: 170px;
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 文本溢出显示省略号 */
  white-space: nowrap; /* 禁止换行 */
}

.node-buttons {
  flex-shrink: 0; /* 禁止按钮区域收缩 */
  margin-left: 10px; /* 与文本保持间距 */
}

.buttonGroup {
  display: flex;
  margin-right: 8px;
}

.status {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 58px;
  height: 22px;
  font-size: 12px;
  line-height: 22px;
  color: #10b981;
  text-align: center;
  background: #b7ead9;
  border: 1px solid #b7ead9;
  border-radius: 4px;

  img {
    width: 16px;
    height: 16px;
  }
}

::v-deep .px-dropdown-menu {
  margin-bottom: 10px;
}
</style>
